<template>
  <div id="Dblclick" style="margin: auto">
    <el-table border :data="classifyList">
      <el-table-column type="index" label="#" width="300"> </el-table-column>
      <el-table-column label="类别名称" prop="uptate">
        <template slot-scope="scope">
          <el-input
            style="width: 90%; margin-right: 20px"
            v-model="form.input"
            v-if="!scope.$index"
            @keyup.enter.native="addlist(form)"
            @
            placeholder="请输入内容"
          ></el-input>
          <div
            :class="{ div: scope.row.id == isActiveId }"
            v-else
            style="height: 40px; line-height: 40px"
          >
            <el-input
              class="ipt"
              v-focus
              v-model="iptValue"
              @blur="enddateblur(scope.$index, scope.row)"
              @keyup.native.enter="enddateblur(scope.$index, scope.row)"
              @keyup.native.esc="escdateblur(scope.$index, scope.row)"
              clearable
            ></el-input>
            <el-button
              class="btn"
              @dblclick.native="changeEnddate(scope.$index, scope.row)"
              type="text"
              icon="el-icon-edit"
              >{{ scope.row.name }}</el-button
            >
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="300">
        <template slot-scope="scope">
          <div v-if="!scope.$index">
            <el-button
              type="success"
              style="margin-left: 35px"
              ref="add"
              @click="addlist(form)"
              >添加</el-button
            >
          </div>
          <div v-else>
            <el-button
              type="warning"
              @click="changeEnddate(scope.$index, scope.row)"
              >修改</el-button
            >
            <el-button type="danger" @click="deleteFn(scope.row.id)"
              >删除</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  data() {
    return {
      form: {
        input: "",
      },
      iptValue: "",
      isActiveId: "",
    };
  },
  async mounted() {
    await this.getlist();
    console.log(this.classifyList);
  },
  computed: {
    ...mapState("classify", ["classifyList"]),
  },
  //获取焦点
  directives: {
    focus: {
      update: function (el) {
        el.children[0].focus();
      },
    },
  },
  methods: {
    ...mapActions("classify", [
      "getlist",
      "addClassify",
      "deleteClassify",
      "updateClassify",
    ]),
    //新增
    async addlist(v) {
      if (!this.form.input) {
        alert("输入框不能为空");
        return;
      }
      // console.log(this.form.input);
      await this.addClassify(this.form.input);
      this.form = {};
      this.getlist();
    },
    //删除
    deleteFn(row) {
      this.deleteClassify(row);
    },
    //修改(双击)
    changeEnddate(index, row) {
      // console.log(this.isActived);
      this.iptValue = row.name;
      this.isActiveId = row.id;
      // console.log(row.id,this.isActiveId);
      this.getlist();
    },
    // 失去焦点
    enddateblur() {
      this.updateClassify({ id: this.isActiveId , val: this.iptValue });
      this.isActiveId = "";
    },
    //esc
    escdateblur(index, row) {
      // this.iptValue = row.update;
      // this.isActiveId = "";
      // this.getList();
    },
  },
};
</script>

<style scoped>
.div .ipt {
  display: block;
}
.div .btn {
  display: none;
}
.ipt {
  display: none;
}
</style>